<%--
  Created by IntelliJ IDEA.
  User: liuxi
  Date: 2018/6/16
  Time: 9:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/statics/sweetalert.css"/>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/sweetalert.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-3.2.1.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/table/bootstrap-table.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/date/Moment.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-body">
        <form class="form-inline">
            <div class="form-group">
                患者姓名：<input id="pName" name="title" type="text" class="form-control" placeholder="搜索内容">
            </div>
            状态:<select name="state" id="state" class="form-control">
                    <option value="3">全部</option>
                </select>
            就诊日期:
            <div class="input-group input-daterange">
                <input id="chargeDate" type="text" class="form-control">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
            <button onclick="search()" type="button" class="btn btn-default">查询</button>
        </form>
    </div>
</div>
<table id="tb"></table>
</body>
<script type="text/javascript">
    function queryParams(params) {
        var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            pageSize: params.pageSize,  //页面大小
            pageNumber: params.pageNumber, //页码
            pName: $("#pName").val(),
            chargeDate: $("#chargeDate").val(),
            state : $("#state").val()
        };
        return temp;
    }
    function search() {
        var opts = $("#table").bootstrapTable('getOptions');
        var pName = $("#pName").val();
        var chargeDate = $("#chargeDate").val();
        var state = $("#state").val();
        $.ajax({
            "url": "${pageContext.request.contextPath}/Charge/query",
            "type": "post",
            "data": {
                "pName": pName,
                "chargeDate":chargeDate,
                "state":state,
                "pageNumber": opts.pageNumber,
                "pageSize": opts.pageSize

            },
            "dataType": "json",
            "success": function (data) {
                $("#table").bootstrapTable('load', data);
            }
        })
    }

    $(function(){
        // 时间插件
        $('#chargeDate').datetimepicker({
            //viewMode: 'day',
            format: 'YYYY-MM-DD'
        });

        //bootstrapTable
        $("#tb").bootstrapTable({
            url: '${pageContext.request.contextPath}/Charge/query',
            columns: [{
                field: 'chargeid',
                title: '收费编号'
            },{
                field: 'pId',
                title: '患者编号'
            }, {
                field: 'pName',
                title: '患者姓名'
            }, {
                field: 'cId',
                title: '病例编号'
            }, {
                field: 'cVisitProjet',
                title: '就诊项目'
            }, {
                field: 'state',
                title: '状态',
                formatter:function (index, row, value) {
                    if(row.state ==1){
                        return "已结账"
                    }else {
                        return "未结账"
                    }
                }
            }],
            method: 'post',
            contentType: "application/x-www-form-urlencoded",
            height: 500,
            pageList: [5, 10, 15],
            pageSize: 5,
            sortable: true,
            sortOrder: "asc",
            pageNumber: 1,
            pagination: true,
            queryParamsType: '',
            queryParams: queryParams,
            sidePagination: 'server'
        });
    })

</script>
</html>
